<template>
  <div class="choose-spec">
    <van-popup
        class="shop-car-dialog"
        @close="handleClose"
        v-model:show="isShowShopCar"
        :lazy-render="false"
        position="bottom"
        :style="{ height: '86%' }"
    >
      <!--   头部商品信息   -->
      <div class="header">
        <div class="left">
          <div class="left-img">
            <img
                :src="goodsModule.currentGoodsDetail.subImages"
                alt="goods_img"
                @click="showImagePreview(goodsModule.currentGoodsDetail.subImages)"
            />
          </div>
          <p class="left-price">
            <span class="price-symbol">￥</span>
            <span class="price-value">{{ goodsModule.currentGoodsSpec.sysProductSpecsVoList[0].productPrice }}</span>
          </p>
        </div>
        <div class="right">
          <van-icon class="right-icon" name="close" @click="isShowShopCar = false"/>
        </div>
      </div>
      <!--   评价tip   -->
      <div class="comment-tip">
        <div class="tip-left">
          <van-icon class="left-icon" name="chat-o"/>
          <span>已有3000名客户给出了好评~</span>
        </div>
        <div class="tip-right">
          <span>全部(30000+)</span>
          <van-icon name="arrow"/>
        </div>
      </div>
      <div class="no-spec-wrapper">
        <!--   配送区域   -->
        <div class="area">
          <p class="area-tip">
            <span class="main-title">配送区域</span>
            <span class="sub-title">(配送地可能会影响库存，请正确选择)</span>
          </p>
          <div class="area-choose">
            <p class="choose-left">
              <van-icon name="location-o"/>
              <span>厦门市 集美区 后溪镇</span>
            </p>
            <van-icon class="choose-right" name="arrow"/>
          </div>
        </div>
        <!--   购买数量   -->
        <div class="pay-count">
          <p class="count-left">
            <template v-if="goodsModule.currentGoodsSpec.sysProductSpecsVoList[0].productStock">
              <span>购买数量</span>
              <span>(限{{ goodsModule.currentGoodsSpec.sysProductSpecsVoList[0].productStock }}件)有货</span>
            </template>
          </p>
          <div class="count-right">
            <van-stepper
                v-model="purchaseCount"
                :max="goodsModule.currentGoodsSpec.sysProductSpecsVoList[0].productStock"
            />
          </div>
        </div>
      </div>
      <van-button
          class="submit-btn"
          round
          block
          type="primary"
          @click="handleShopCarSubmit"
      >确认
      </van-button>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
// 购物车点击后的提交
import {inject, Ref, ref} from "vue";
import useGoodsModule from "@/store/goodsModule";
import {useRoute, useRouter} from "vue-router";
import usePayModule from "@/store/payModule";
import {Toast} from "vant";
import useShopCarModule from "@/store/shopCarModule";
import {showImagePreview} from "@/utils/image";

const route = useRoute()
const router = useRouter()
const goodsModule = useGoodsModule()
const shopCarModule = useShopCarModule()
const payModule = usePayModule()
const isShowShopCar = ref(false)

const purchaseCount = ref(1)

const currentMode = inject("currentMode") as Ref<string>
// 提交处理
const handleShopCarSubmit = async () => {
  const list = goodsModule.currentGoodsSpec?.sysProductSpecsVoList
  if (currentMode.value === "purchase") {
    if (list?.length) {
      payModule.setGoodsDetailSubmitAction({
        canPurchase: list[0],
        canPurchaseCount: purchaseCount.value // 购买的数量而不是能购买的最大数量
      })
      router.push("/payment/" + route.params.goodsId)
    }
  } else if (currentMode.value === "shopCar") {
    const productId = goodsModule.currentGoodsDetail.id as number
    const list = goodsModule.currentGoodsSpec?.sysProductSpecsVoList
    let productSpecsId = 0
    if (list?.length) {
      productSpecsId = list[0].id
    }
    // 发请求加购物车
    const isSuccess = await shopCarModule.addShopCarAction({
      needParams: {
        productSpecsId,
        productId,
        productTotal: purchaseCount.value
      },
      needConfig: {
        needNavigate: "/goods/detail/" + goodsModule.currentGoodsDetail.id
      }
    })
    if (isSuccess) {
      Toast.success("已加入购物车")
      isShowShopCar.value = false
    }
  }
}
// 关闭时的回调
const handleClose = () => {
  purchaseCount.value = 1
}
defineExpose({
  isShowShopCar
})
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.choose-spec {
  :deep(.shop-car-dialog) {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    overflow: hidden;

    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      height: 80px;

      .left {
        display: flex;

        .left-img {
          width: 80px;
          height: 80px;
          margin-right: 10px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
        }

        .left-price {
          font-weight: 600;
          font-size: 18px;
          color: #C81C22;
          margin-top: 10px;

          .price-symbol {
            font-size: 12px;
          }

          .price-value {
            font-size: 20px;
          }
        }
      }

      .right {
        .right-icon {
          font-size: 22px;
          position: relative;
          margin-top: 10px;

          &::after {
            content: "";
            display: block;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }

    .comment-tip {
      border-radius: 4px;
      background-color: @theme-grey-color;
      padding: 10px 10px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      align-items: center;
      margin-bottom: 10px;
      height: 40px;
      box-sizing: border-box;

      .tip-left {
        .left-icon {
          margin-right: 4px;
        }
      }

      .tip-right {
        color: #999;
      }
    }

    .no-spec-wrapper {
      height: calc(100% - 90px - 50px - 45px);
      overflow: hidden;

      .area {
        padding: 10px 10px 0 10px;
        border-top: 1px solid #f2f2f2;
        margin-bottom: 10px;

        .area-tip {
          margin-bottom: 10px;

          .main-title {
            font-size: 14px;
          }

          .sub-title {
            font-size: 12px;
            color: #999;
          }
        }

        .area-choose {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
        }
      }

      .pay-count {
        border-top: 1px solid #f2f2f2;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .count-left {
          font-size: 14px;
        }
      }

    }

    .submit-btn {
      position: absolute;
      bottom: 10px;
      width: 95%;
      border: none;
      height: 45px;
    }
  }
}
</style>
